<%@ page import="com.zywl.utils.utils.IPUtil" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@include file="../base/base.jspf" %>
<link rel="stylesheet" type="text/css" href="${ctx }/static/css/style.css"/>
<div class="layui-form" style="padding: 47px 0 0 70px;">
    <input type="hidden" name="usrId" value="${user.usrId}"/>
    <input type="hidden" name="usrAvatar" value="${user.usrAvatar}"/>
    <div class="layui-col-xs6">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" value="${user.usrName}" name="usrName" lay-verify="required" placeholder="请输入姓名"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <c:if test='${!empty user.usrId}'>
                    <input type="hidden" id="user-old-username" value="${user.usrUsername}"/>
                </c:if>
                <input type="text" value="${user.usrUsername}" autocomplete="off"
                       lay-verify="required|isUsername<c:if test="${empty user.usrId}">|userUsernameExist</c:if>"
                       name="usrUsername" placeholder="请输入用户名" class="layui-input"
                       <c:if test="${!empty user.usrId}">readonly="readonly"</c:if>/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-inline">
                <input type="text"  name="usrBirthday" id="usrBirthday" placeholder="请选择生日" class="layui-input"
                        value="<fmt:formatDate value="${user.usrBirthday }" pattern="yyyy-MM-dd"/>"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-inline">
                <input type="text" value="${user.usrMobile}" name="usrMobile"
                       lay-verify="usrMobile" placeholder="请输入联系电话" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户角色</label>
            <div class="layui-input-inline">
                <select name="usrRoleId">
                    <c:forEach var="role" items="${roles}">
                        <option value="${role.roeId }"
                                <c:if test="${user.usrRoleId eq role.roeId}">selected="selected"</c:if>>${role.roeName}
                        </option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <input type="radio" name="usrGender" value="M" title="男" <c:if test="${user.usrGender eq 'M' || user.usrGender == null}">checked</c:if>>
                <input type="radio" name="usrGender" value="F" title="女" <c:if test="${user.usrGender eq 'F'}">checked</c:if>>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">个性签名</label>
            <div class="layui-input-inline">
                <input type="text" value="${user.usrSign}" name="usrSign"  placeholder="请输入个性签名" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-inline">
                <input type="text" value="${user.usrAddress}" name="usrAddress"  placeholder="请输入地址" class="layui-input"/>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6">
        <div class="text-center" id="clickToUploadHead">
            <a href="javascript:void(0);" class="upimg-a">
                <img style="height: 153px; width: 123px;" src="${ctx}${user.usrAvatar}"
                     id="user-userSubmitPage-userHead"
                     class="thumbnail"
                     onerror="javascript:this.src='${ctx}/static/images/pic-default.jpg';">
                <div class="upimg-shade">
                    <span style="margin-left: 20%;">
                      点击上传
                    </span>
                </div>
            </a>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit id="user-front-submit" lay-filter="user-front-submit" value="确认"/>
    </div>
</div>

<script type="text/javascript">
    layui.config({
        base: "${ctx}/static/framework/layuiadmin/"
    }).extend({
        index: "lib/index" //主入口模块
    }).use(["index", "form", "upload","laydate"], function () {
        var upload = layui.upload, form = layui.form,laydate = layui.laydate;

        laydate.render({
            elem: '#usrBirthday',
            type: 'date',
            format:'yyyy-MM-dd'
        });

        upload.render({
            elem: "#clickToUploadHead",
            url: "${ctx}/user/uploadFile",
            multiple: true,
            accept: "images",
            acceptMime: "image/*",
            size: 2048,//限制文件大小，单位 KB
            type: "post",
            done: function (result) {
                $("#user-userSubmitPage-userHead").attr("src","${ctx}"+result.path);
                $("input[name='usrAvatar']").val(result.path);
            }
        });

        form.verify({
            isUsername: function (value, item) {
            },
            userUsernameExist: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (${empty user.usrId}) {
                    if (verificationData("userUsernameExist", value)) {
                        return value + "已存在";
                    }
                } else {
                    if ($("#user-old-username").val() != value && verificationData("userUsernameExist", value)) {
                        return value + "已存在";
                    }
                }
            }
        });
        form.on("submit(user-front-submit)", function (data) {
            $("#user-front-submit").attr("disabled",true);
            tip_index = load();
            var field = data.field;
            $.ajax({
                async: true,
                url: "${ctx}/user/userSubmit",
                type: "post",
                dataType: "json",
                data: field,
                success: function (data) {
                    layer.close(tip_index);
                    if (data.result) {
                        parentTableReload("user-page-data");
                        successUp(data.info);
                        closeDialog();
                    } else {
                        $("#user-front-submit").attr("disabled",false);
                        error(data.info);
                    }
                }
            });
        });
    });
</script>